<!--
 * @Author: coocase
 * @Date: 2021-03-10 14:48:03
 * @LastEditTime: 2021-05-11 23:00:44
 * @LastEditors: coocase
 * @Description: 登录
 * @FilePath: \git\dami\src\pages\login\login.vue
-->
<template>
  <div class="login-wrap">
    <Card class="login-card">
      <p slot="title" class="login-title">Hi!欢迎登录</p>
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="user">
          <Input
            class="login-input"
            type="text"
            v-model="formInline.user"
            placeholder="Username"
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            class="login-input"
            type="password"
            v-model="formInline.password"
            placeholder="Password"
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')"
            >Signin</Button
          >
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      formInline: {
        user: "",
        password: "",
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "Please fill in the user name",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please fill in the password.",
            trigger: "blur",
          },
          {
            type: "string",
            min: 6,
            message: "The password length cannot be less than 6 bits",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          localStorage.setItem("order", []);
          this.$Message.success("Success!");
          this.GLOBAL.hasLogin = true;
          //通过路由把用户名传递给index
          this.$router.push({
            name: "logined",
            params: { name: this.formInline.user },
          });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
  },

  mounted() {
    // this.$http.getRequest({
    //   api: 'loginTest',
    //   data: {
    //     'id':'001'
    //   }
    // }).then((res) => {
    //   console.log(JSON.stringify(res.data))
    // }).catch((err) => {
    // });
  },
  updated: function () {
    console.log("login updated");
  },
};
</script>

<style scoped>
.login-input {
  width: 400px;
  margin-bottom: 10px;
}
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6e6e6;
}
.login-title {
  font-size: 30px;
  font: bold;
  height: 45px;
  line-height: 49px;
}
.login-card {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  margin: 100px;
  width: 600px;
  height: 400px;
}
</style>